import ProTable from '@/components/ProTable/index.vue'
import { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
// import { times } from 'lodash-es'
import { reactive, ref } from 'vue'
import { handleRowAction, handleAction } from './action'
import { systemManageApi } from '@/api/modules/systemManage'
import mittBus from '@/utils/mittBus'
export const tableInstance = ref<ProTableInstance>()
export const RenderPage = () => {
  return (
    <ProTable
      columns={columns}
      // data={data}
      pagination={true}
      request-api={systemManageApi.getRolePageList}
      data-callback={data => {
        return {
          ...data,
          pageNum: data.current,
          pageSize: data.size,
          list: data.records
        }
      }}
      ref={tableInstance}
      v-slots={{
        tableHeader: () => <el-button onClick={() => handleAction('addRole')}>添加角色</el-button>
      }}
    />
  )
}

const columns = reactive<ColumnProps<any[]>[]>([
  { type: 'index', label: '序号', width: 80 },
  { prop: 'nameZh', label: '角色中文名' },
  { prop: 'nameEn', label: '角色英文名' },
  {
    prop: 'operation',
    label: '操作',
    render: ({ row }) => {
      return (
        <>
          <el-link type="success" onClick={() => handleRowAction('functionLimit', row)}>
            编辑
          </el-link>
          {/* <el-link type="success" onClick={() => handleRowAction('dataLimit', row)}>
            数据权限
          </el-link> */}
          <el-link type="success" onClick={() => handleRowAction('delete', row)}>
            删除
          </el-link>
        </>
      )
    }
  }
])
mittBus.on('refreshRoleList', () => {
  tableInstance.value!.getTableList()
})
